I've got Webpack working with Babel and including the @babel/polyfill, yet IE11 is still throwing a SCRIPT438 error when trying to use .forEach on a NodeList.
Here's my package.json
{
...
"scripts": {
"build:js": "webpack --config ./_build/webpack.config.js"
},
...
"browserslist": [
"IE 11",
"last 3 versions",
"not IE < 11"
],
"babel": {
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "usage"
}
]
]
},
"devDependencies": {
"@babel/core": "^7.1.6",
"@babel/preset-env": "^7.1.6",
"babel-loader": "^8.0.4",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"@babel/polyfill": "^7.0.0"
}
}
My webpack.config.js:
const path = require('path');
const webpack = require('webpack');
module.exports = (env, argv) => {
const javascript = {
test: /\.js$/,
use: {
loader: 'babel-loader'
}
};
// config object
const config = {
entry: {
main: './_src/js/main.js',
},
devtool: 'source-map',
output: {
path: path.resolve(__dirname, '../js'),
filename: '[name].js',
},
module: {
rules: [javascript]
}
}
return config;
}
And finally /_src/main.js that I'm running through webpack and babel:
const testList = document.querySelectorAll('.test-list li');
testList.forEach(item => {
console.log(item.innerHTML);
})
The docs at https://babeljs.io/docs/en/babel-polyfill say that you don't need to import or require polyfill when loading it via Webpack with useBuiltIns: "usage". But even if I remove that option and manually import the whole polyfill at the top of main.js (making my bundle huge), it still errors out in IE11.
So...what am I doing wrong?